<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
	<div class="row">
		<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
			<div class="panel panel-info">
				  <div class="panel-heading">
						<h3 class="panel-title">Món</h3>
				  </div>
				  <div class="panel-body form" >
						<form action="" method="POST" class="form-horizontal" role="form">
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-3 control-label">Tên món</label>
									<div class="col-sm-9">
									  <input name="Chọn " id="" class="form-control"></input>
									</div>
								</div>
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-3 control-label">Loại</label>
									<div class="col-sm-9">
									 <select name="" id="chonmon" class="form-control" data-bind='options: sampleProductCategories, optionsText: "name",  value: category'> </select>
									</div>
								</div>
								<div class="form-group" >
									<label for="inputEmail3" class="col-sm-3 control-label">Nhóm</label>
									<div class="col-sm-9" data-bind="with: category">
									   <select class="form-control" data-bind='options: products, optionsText: "name",  value: $parent.product'> </select>
									</div>
								</div>
								<div class="form-group" >
									<label for="inputEmail3" class="col-sm-3 control-label">Đơn giá</label>
									<div class="col-sm-9" data-bind=''>		  
                  					   <input type="number" name="" id="" class="form-control" value="" min="1000" max="100000"></input>
									</div>
								</div>
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-3 control-label">ĐVT</label>
									<div class="col-sm-9" data-bind='with: product'>	
									  <input name="Chọn " id="" class="form-control" data-bind='value: DVT'></input>
									</div>
								</div>
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-3 control-label">Ghi chú</label>
									<div class="col-sm-9">
									  <input name="Chọn " id="" class="form-control"></input>
									</div>
								</div>
								<div class="form-group">
							  	<label for="inputPassword3" class="col-xs-3 col-sm-3 col-md-3 col-lg-3"></label>
							    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
							       <button  class="btn btn-primary"><span class="glyphicon glyphicon-plus-sign"></span> Thêm</button>
							    </div>
							       
							  </div>	
							</form>	
				  </div>
			</div>
				
		</div>
		<div class="col-xs-12 col-sm-6 col-md-7 col-lg-8">
			<div class="panel panel-info panel-responsive">
				  <div class="panel-heading">
						<h3 class="panel-title">Danh sách món</h3>								
				  </div>
				  <div class="panel-body">
						<div class="table-responsive">
							<table class="table table-striped table-bordered" onload="myFunction()">
								<thead>
									<tr class="btn-primary">
										<th>STT</th>
										<th>Tên món</th>
										<th>Loại</th>
										<th>Nhóm</th>
										<th>Đơn giá</th>
										<th>ĐVT</th>
										
									</tr>
								</thead>
								<tbody data-bind="template: { foreach: vendors, as :'vendors' }">					  
									<tr> 
										<td data-bind="text: $index"></td>
										<td data-bind="text: vendors.TENMON"></td>
										<td data-bind="text: 'Thức uống'"></td>
										<td data-bind="text: vendors.MANHOM"></td>
										<td data-bind="text: vendors.DONGIA"></td>
										<td data-bind="text: vendors.DVT"></td>
										
									</tr>													
								</tbody>
							</table>
						</div>
						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
							<div class="text-center">
								<ul class="pagination">
								  <li><a href="#">&laquo;</a></li>
								  <li><a href="#">1</a></li>
								  <li><a href="#">2</a></li>
								  <li><a href="#">3</a></li>
								  <li><a href="#">4</a></li>
								  <li><a href="#">5</a></li>
								  <li><a href="#">&raquo;</a></li>
								</ul>
							</div>
						</div>
				  </div>
			</div>			
		</div>	
	</div>						   
</div>

<script type="text/javascript">
	// Some of the Knockout examples use this data
var sampleProductCategories = [
  {
    "products": [
      {
        "name": "Sinh tố",
        "DVT": "ly"
      },
      {
        "name": "Kem",
        "DVT": "ly"
      }
   
    ],
    "name": "Thức uống"
  },
  {
    "products": [
      {
        "name": "Bánh mỳ",
        "DVT": "ổ"
      },
      {
        "name": "Bánh xèo",
        "DVT": "chiếc"
      },
      {
        "name": "Hủ tiếu",
        "DVT": "tô"
      }
    ],
    "name": "Đồ ăn"
  }
];

</script>